<template>
  <div>
    <router-view @logged="goBack"/>
    <div class="openlink">
      <router-link
        :to="{name: 'passport/register'}"
        class="rlink"
      >注册</router-link>
      <span>|</span>
      <router-link
        :to="{name: 'help'}"
        class="rlink"
      >帮助</router-link>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      redirect: undefined,
      otherQuery: {}
    }
  },
  watch: {
    $route: {
      handler (route) {
        console.group('Login route change')
        console.log('route', route)
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
        console.groupEnd('Login route change')
      },
      immediate: true
    }
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    console.group('Login beforeRouteLeave')
    console.log(to)
    next()
    console.groupEnd('Login beforeRouteLeave')
  },
  methods: {
    goBack (data) {
      console.log('[RouteViewData]', data)
      // 获取来源页路由
      var referrer = sessionStorage.getItem('LoggedReferrer')
      if (referrer != null) {
        this.$router.replace({
          path: referrer
        })
        sessionStorage.removeItem('LoggedReferrer')
      } else {
        this.$router.push({
          path: '/'
        })
      }
    },
    onView (d) {
      console.log('d', d)
    },
    getOtherQuery (query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
}
</script>
<style lang="less">
.change-loginmode {
  text-align: center;
  .van-button {
    &:active::before {
      opacity: 0;
    }
    &--default {
      border: none;
      background: none;
      color: #805916;
      padding: 0;
      height: auto;
      line-height: initial;
      display: inline-flex;
      flex-direction: row-reverse;
      align-items: center;
    }
  }
}
.openlink {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  a {
    padding: 0 10px;
    margin: 0;
    text-decoration: none;
    font-size: 14px;
    color: #805916;
  }
  span {
    font-size: 12px;
    color: #dcdcdc;
  }
}
</style>
<style lang="less" scoped>
.van-field__error-message {
  display: none;
}
</style>
